<div id="account-access-keys">
    <h3 class="account-title">
        <i class="fa fa-unlock-alt" aria-hidden="true"></i> {{# gettext }}Personal API access keys{{/ gettext }}
    </h3>

    <p class="help">
        {{# gettext }}You can use API access keys to access the REST API from scripts or command line.
        However, these access keys are like password and should be guarded carefully.{{/ gettext }}
    </p>

    {{# last_access_key }}
        <div class="alert alert-success">
            <p><i class="fa fa-check" aria-hidden="true"></i> {{# gettext }}Make sure you copy your new access key, you won't be able to see it again!{{/ gettext }}</p>
            <p class="generated-access-key">{{ last_access_key }}</p>
        </div>
    {{/ last_access_key }}

    <form action="/account/access_key/revoke" method="post">
        {{# csrf_token }}
            {{> csrf_token_input }}
        {{/ csrf_token }}
        <table class="table access-keys-table">
            <thead>
            <tr>
                <th></th>
                <th>{{# gettext }}Generated on{{/ gettext }}</th>
                <th>
                    {{# gettext }}Last used on{{/ gettext }}
                    <span
                            class="access-keys-accesses-warning"
                            title="{{# gettext }}Accesses from less than %s might not be visible | {{ last_access_resolution }} {{/ gettext }}"
                    >
                        <i class="fa fas fa-question-circle" aria-hidden="true"></i>
                    </span>
                </th>
                <th>{{# gettext }}Last used by{{/ gettext }}</th>
                <th>{{# gettext }}Description{{/ gettext }}</th>
            </tr>
            </thead>
            {{# has_access_keys }}
                <tbody>
                {{# access_keys }}
                    <tr>
                        <td><input type="checkbox" name="access-keys-selected[]" value="{{ id }}"/></td>
                        <td>{{ creation_date }}</td>
                        <td>
                            {{# last_used_on }}{{ last_used_on }}{{/ last_used_on }}
                            {{^ last_used_on }}{{# gettext }}Never{{/ gettext }}{{/ last_used_on }}
                        </td>
                        <td>
                            {{# last_used_by }}{{ last_used_by }}{{/ last_used_by }}
                            {{^ last_used_by }}-{{/ last_used_by }}
                        </td>
                        <td>{{ description }}</td>
                    </tr>
                {{/ access_keys }}
                </tbody>
            {{/ has_access_keys }}
            {{^ has_access_keys }}
                <tbody>
                <tr>
                    <td class="table-cell-empty" colspan="5">{{# gettext }}No API access keys{{/ gettext }}</td>
                </tr>
                </tbody>
            {{/ has_access_keys }}
        </table>

        <div>
            <a class="btn btn-primary" href="#access-keys-generate-modal" data-toggle="modal">
                <i class="fa fa-plus" aria-hidden="true"></i> {{# gettext }}Generate new key{{/ gettext }}
            </a>
            {{# has_access_keys }}
                <button type="submit"
                        id="button-revoke-access-tokens"
                        name="revoke-access-tokens"
                        class="btn btn-danger"
                        disabled
                >
                    <i class="fa fa-trash-o" aria-hidden="true"></i> {{# gettext }}Revoke selected access keys{{/ gettext }}
                </button>
            {{/ has_access_keys }}
        </div>
    </form>
</div>
<div id="access-keys-generate-modal"
     class="modal hide fade"
     tabindex="-1"
     role="dialog"
     aria-labelledby="access-keys-generate-modal-title"
     aria-hidden="true"
>
    <div class="modal-header">
        <h3><i class="fa fa-unlock-alt" aria-hidden="true"></i><span id="access-keys-generate-modal-title">
            {{# gettext }}New personal API access key{{/ gettext }}
        </span></h3>
    </div>

    <form action="/account/access_key/create" method="post">
        {{# csrf_token }}
            {{> csrf_token_input }}
        {{/ csrf_token }}
        <div class="modal-body">
            <p>
                {{# gettext }}A personal API access key will be automatically generated at the form submission.
                The description is not required but it can help you to manage your access keys.{{/ gettext }}
            </p>

            <label for="access-key-description">{{# gettext }}Access key description{{/ gettext }}</label>
            <textarea id="access-key-description" name="access-key-description" rows="5"
                      placeholder="{{# gettext }}What's this access key for?{{/ gettext }}"></textarea>
        </div>

        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">{{ btn_close_label }}</button>
            <input type="submit" class="btn btn-primary" value="{{# gettext }}Generate new key{{/ gettext }}">
        </div>
    </form>
</div>